<template>
  <view class="shop">
    <view class="top">
      <view class="input">
        <uv-input
          placeholder="请输入电话/门店名称进行搜索"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          customStyle="border-radius:50px;background-color:#f5f6f7"
        ></uv-input>
      </view>
      <view class="xiala">
        <uv-drop-down
          ref="dropDown"
          sign="dropDown_1"
          text-active-color="#909090"
          text-color="#909090"
          :extra-icon="{
            name: 'arrow-down',
            color: '#909090',
            size: '26rpx',
          }"
          :extra-active-icon="{
            name: 'arrow-down',
            color: '#909090',
            size: '26rpx',
          }"
          :defaultValue="defaultValue"
          :custom-style="{ padding: '0 30rpx' }"
          @click="selectMenu"
        >
          <uv-drop-down-item
            name="order"
            type="1"
            label="全部门店"
            :value="dropItem('order').value"
            text-active-color="#909090"
          >
          </uv-drop-down-item>
          <uv-drop-down-item
            name="type"
            type="2"
            :label="dropItem('type').label"
            :value="dropItem('type').value"
            text-active-color="#909090"
          >
          </uv-drop-down-item>
          <uv-drop-down-item
            name="vip_type"
            type="2"
            :label="dropItem('vip_type').label"
            :value="dropItem('vip_type').value"
            text-active-color="#909090"
          >
          </uv-drop-down-item>
        </uv-drop-down>
        <uv-drop-down-popup
          sign="dropDown_1"
          :click-overlay-on-close="true"
          :currentDropItem="currentDropItem"
          @clickItem="clickItem"
          @popupChange="change"
        ></uv-drop-down-popup>
      </view>
    </view>
    <view class="content" v-for="item in 3" :key="item">
      <view class="content-top">
        <view class="content-left">
          <image src="/static/car.png"></image>
        </view>
        <view class="content-right">
          <view class="cright-top">
            <view class="top-left">鑫日汽修厂</view>
            <view class="top-right">1.2km</view>
          </view>
          <view class="cright-center">
            <uv-rate
              size="16"
              :count="count"
              activeColor="#ffb800"
              v-model="value"
            ></uv-rate>
            <text>服务次数：235</text>
          </view>
          <view class="cright-center1">
            山东省临沂市河东区香港路与长安路东100米鑫日汽修厂
          </view>
          <view class="cright-bottom">
            <view class="neirong">洗车</view>
            <view class="neirong">美容</view>
            <view class="neirong">维修</view>
            <view class="neirong">轮胎</view>
            <view class="neirong">保养</view>
            <view class="neirong">改装</view>
          </view>
        </view>
      </view>
      <view class="content-bottom">
        <button class="btn">确定选择</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      value: 4,
      // 表示value等于这些值，就属于默认值
      defaultValue: [0, "all", "0"],
      // 筛选结果
      result: [{ name: "order", label: "最新发布", value: "new" }],
      // { name: 'order', label: '最新发布', value: 'new' }
      activeName: "order",
      order: {
        label: "综合排序",
        value: "all",
        activeIndex: 0,
        color: "#333",
        activeColor: "#909090",
        child: [
          {
            label: "综合排序",
            value: "all",
          },
          {
            label: "最新发布",
            value: "new",
          },
          {
            label: "低价优先",
            value: "money",
          },
        ],
      },
      type: {
        label: "临沂市",
        value: "all",
        activeIndex: 0,
        color: "#333",
        activeColor: "#909090",
        child: [
          {
            label: "临沂市",
            value: "all",
          },
          {
            label: "青岛市",
            value: "pdf",
          },
          {
            label: "济南市",
            value: "word",
          },
          {
            label: "威海市",
            value: "ppt",
          },
        ],
      },
      vip_type: {
        label: "综合排序",
        value: 0,
        activeIndex: 0,
        activeColor: "#909090",
        child: [
          {
            label: "综合排序",
            value: "all",
          },
          {
            label: "默认排序",
            value: "pdf",
          },
        ],
      },
    };
  },
  methods: {
    change(e) {
      console.log("弹窗打开状态：", e);
    },
    /**
     * 点击每个筛选项回调
     * @param {Object} e { name, active, type } = e
     */
    selectMenu(e) {
      const { name, active, type } = e;
      this.activeName = name;
      // type 等于1 的需要特殊处理：type不等于1可以忽略
      if (type == 1) {
        this.clickItem({
          name: "vip_type",
          label: "VIP文档",
          value: e.active ? 1 : 0,
        });
      } else {
        const find = this.result.find((item) => item.name == this.activeName);
        if (find) {
          const findIndex = this[this.activeName].child.findIndex(
            (item) => item.label == find.label && item.value == find.value
          );
          this[this.activeName].activeIndex = findIndex;
        } else {
          this[this.activeName].activeIndex = 0;
        }
      }
    },
    clickItem(e) {
      // 下面有重新赋值，所以用let
      let { label, value } = e;
      const findIndex = this.result.findIndex(
        (item) => item.name == this.activeName
      );
      if (
        this.defaultValue.indexOf(value) > -1 &&
        this[this.activeName].label
      ) {
        label = this[this.activeName].label;
      }
      // 已经存在筛选项
      if (findIndex > -1) {
        this.$set(this.result, findIndex, {
          name: this.activeName,
          label,
          value,
        });
      } else {
        this.result.push({
          name: this.activeName,
          label,
          value,
        });
      }
      this.result = this.result.filter(
        (item) => this.defaultValue.indexOf(item.value) == -1
      );
      // uni.showModal({
      //   content: `筛选的值：${JSON.stringify(this.result)}`,
      // });
    },
  },
  onPageScroll() {
    // 滚动后及时更新位置
    this.$refs.dropDown.init();
  },
  computed: {
    dropItem(name) {
      return (name) => {
        const result = {};
        const find = this.result.find((item) => item.name === name);
        if (find) {
          result.label = find.label;
          result.value = find.value;
        } else {
          result.label = this[name].label;
          result.value = this[name].value;
        }
        return result;
      };
    },
    // 获取当前下拉筛选项
    currentDropItem() {
      return this[this.activeName];
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}
.shop {
  .top {
    background-color: #fff;
    padding-top: 20rpx;
    .input {
      width: 95%;
      margin: auto;
      // margin-top: 20rpx;
    }
    .xiala {
      margin-top: 20rpx;
    }
  }
  .content {
    background-color: #fff;
    border-radius: 10px;
    width: 90%;
    margin: auto;
    margin-top: 20rpx;
    padding: 20rpx;
    .content-top {
      display: flex;
      justify-content: space-between;
      .content-left {
        width: 30%;
        border-radius: 10rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 180rpx;
        }
      }
      .content-right {
        position: relative;
        width: 65%;
        .cright-top {
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          font-size: 34rpx;
          .top-right {
            color: #787878;
            font-weight: 400;
            font-size: 26rpx;
          }
        }
        .cright-center {
          display: flex;
          font-size: 26rpx;

          color: #b7b7b7;
          margin-top: 10rpx;
          text {
            margin-left: 20rpx;
          }
        }
        .cright-center1 {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 26rpx;
          margin-top: 10rpx;
          color: #868686;
        }
        .cright-bottom {
          display: flex;
          font-size: 24rpx;
          position: absolute;
          bottom: 0;
          .neirong {
            background-color: #ffece9;
            margin-right: 10rpx;
            color: #fd7158;
            width: 60rpx;
            text-align: center;
            border-radius: 10rpx;
            height: 40rpx;
            line-height: 40rpx;
          }
        }
      }
    }
    .content-bottom {
      width: 100%;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: right;
      .btn {
        margin-right: 0; 
        width: 25%;
        font-size: 22rpx;
        background-color: #ffffff;
        color: #fc5234;
        border: 1px solid #fc6e54;
        border-radius: 20px;
      }
    }
  }
}
</style>
